<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>负载均衡式的在线OJ</title>
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="left">
            <a href="/">首页</a>
            <a href="/all_questions.html">编程题库</a>
        </div>
        <div class="center">
            <a href="/html/job_seek.html">求职</a>
            <a href="/html/learning.html">学习</a>
            <a href="/html/discuss.html">讨论</a>
            <a href="/html/question_bank.html">知识题库</a>
            <a href="/html/ai_qa.html">AI问答</a>
        </div>
        <div class="right">
            <a href="/html/register.html">注册</a>
            <a href="/html/login.html">登录</a>
            <a href="/html/userInfo.html" class="toRight">个人信息</a>
        </div>
    </div>
    
    <div class="container">

        <!-- 主标题区 -->
        <div class="header">
            <h1>负载均衡式的在线OJ</h1>
            <p>独立开发的高效在线OJ平台，享受编程乐趣</p>
        </div>

        <!-- 功能卡片 -->
        <div class="features">
            <div class="feature-card" onclick="window.location.href='/html/algorithm.html'">
                <h3>丰富题库</h3>
                <p>数千道编程题目，覆盖各类算法与数据结构。</p>
            </div>
            <div class="feature-card" onclick="window.location.href='/html/contest.html'">
                <h3>实时竞赛</h3>
                <p>参与实时竞赛，与全球用户切磋技艺。</p>
            </div>
            <div class="feature-card" onclick="window.location.href='/html/discussion.html'">
                <h3>讨论区</h3>
                <p>分享解题思路，交流编程技巧。</p>
            </div>
        </div>

        <!-- 推荐题目 -->
        <div class="recommended-section">
            <h2>推荐题目</h2>
            <div class="question-list">
                <div class="question-item" onclick="window.location.href='/html/question_1.html'">
                    <h4>初级算法 - 排序</h4>
                </div>
                <div class="question-item" onclick="window.location.href='/html/question_2.html'">
                    <h4>数据结构 - 链表操作</h4>
                </div>
                <div class="question-item" onclick="window.location.href='/html/question_3.html'">
                    <h4>动态规划 - 背包问题</h4>
                </div>
                <div class="question-item" onclick="window.location.href='/html/question_4.html'">
                    <h4>高级算法 - 二分查找</h4>
                </div>
            </div>
            <!-- 跳转按钮 -->
            <div class="cta-button-container">
                <a href="/html/question_bank.html" class="cta-button">查看完整题库</a>
            </div>
        </div>

        <!-- 开始按钮 -->
        <a href="/all_questions.html" class="cta-button">点击开始编程</a>
    </div>
</body>

</html>
